<!-- Copyright 2020 the V8 project authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<head>
  <link href="./index.css" rel="stylesheet">
</head>
<style>
  #timelineOverview {
    width: 100%;
    height: 50px;
    position: relative;
    margin-top: -50px;
    margin-bottom: 10px;
    background-size: 100% 100%;
    border: 1px var(--primary-color) solid;
    border-width: 1px 0 1px 0;
    overflow: hidden;
  }

  #timelineOverviewIndicator {
    height: 100%;
    position: absolute;
    box-shadow: 0px 2px 20px -5px var(--primary-color) inset;
    top: 0px;
    cursor: ew-resize;
  }

  #timelineOverviewIndicator .leftMask,
  #timelineOverviewIndicator .rightMask {
    background-color: rgba(240, 230, 230, 0.3);
    width: 10000px;
    height: 100%;
    position: absolute;
    top: 0px;
  }

  #timelineOverviewIndicator .leftMask {
    right: 100%;
  }

  #timelineOverviewIndicator .rightMask {
    left: 100%;
  }
</style>
<div class="panel">
  <h2>Timeline Panel</h2>
  <h3>Timeline</h3>
  <div>
    <slot></slot>
  </div>
  <div id="timelineOverview">
    <div id="timelineOverviewIndicator">
      <div class="leftMask"></div>
      <div class="rightMask"></div>
    </div>
  </div>
</div>
